<template>
  <view class="container">
    <view class="header">
      <image class="back-btn" src="/static/images/back.png" mode="aspectFit" @click="goBack" />
      <text class="title">关注详情</text>
    </view>
    <view class="content">
      <image class="avatar" :src="userInfo.avatar" mode="aspectFit" />
      <text class="nickname">{{userInfo.nickname}}</text>
      <text class="gender">{{userInfo.gender}}</text>
      <text class="location">{{userInfo.location}}</text>
    </view>
	<view class="container-text">
		<view class="text-zj">简介</view>
<view class="text-zjone">
这就是我们的故事。故事里的少年们生活在不算遥远的过去，一个青瓦小巷，墙皮斑驳的小城。那里阳光温暖却不浓烈。校门口的街边，总是弥漫着煎炸小食油腻腻的香气。男生们踩在发出各种声响的老旧自行车上高声谈笑，女生穿着永远宽大的校服，在婆娑的树影里微笑。风吹过身旁，才能看出她们瘦小纤细的轮廓……他们共同穿行在一段叫做高三的时光里。他们讨厌考试，担心分数。他们小心翼翼地喜欢着某人，但当亲密突然而至的时候又会怯而止步。他们好像有很多梦想，但是铺在前方的未来却很单调。他们总是愤力撞击着青春的牢笼！却找不到前行的方向……他们觉得一切很丑————他们觉得，一切很美。翻开这个故事，你就像按下了关机键。关掉这个世界的纷繁和所有不及回味的快节奏交流，你才会看到自己的剪影，在黑色屏幕里静静的反光。在那段想要回忆却几乎要遗忘的时光里，在那种含蓄、静默的美好里，重新奔跑、眺望……这是一个发生在上世纪九十年代末，一个平凡、宁静的南方小县城的故事。 讲述了几位小城的高三学生，在面对如山的学业压力间隙中，萌芽的梦想、友谊和初恋，以及他们和大人世界的那道鸿沟。 他们在成长中，幸福和痛苦同时蜕变、升华……
</view>

<view class="text-title">视频推荐</view>
<view class="container-video"> 
<scroll-view scroll-x>
    <view class="video-name">
<video  controls src="https://vod.pipi.cn/fe5b84bcvodcq1251246104/02c46d5f5285890796585099623/f0.mp4 "></video></view>

<view class="video-name">
<video  controls src="https://vod.pipi.cn/fe5b84bcvodcq1251246104/fc45e9615285890796588881560/f0.mp4"></video></view>

<view class="video-name">
<video  controls src=" https://vod.pipi.cn/fe5b84bcvodcq1251246104/a3476b405285890796587331669/f0.mp4"></video></view>

<view class="video-name">
<video  controls src="https://vod.pipi.cn/d5457264vodtranscq1251246104/b0e19fd05285890812988002583/v.f42905.mp4"></video></view>

<view class="video-name">
<video  controls src="https://vod.pipi.cn/fec9203cvodtransbj1251246104/43bcb7103701925921495881188/v.f42905.mp4"></video></view>

<view class="video-name">
<video  controls src="https://vod.pipi.cn/fec9203cvodtransbj1251246104/406ed5ba5285890817833606679/v.f42905.mp4 "></video></view>

<view class="video-name">
<video  controls src="https://vod.pipi.cn/fe5b84bcvodcq1251246104/e944e2b75285890796588036405/f0.mp4"></video></view>

</scroll-view>
</view>


<view class="contauner-img">相册·合集</view>
<view class="container-image">
<scroll-view scroll-x="true">
<view class="image-text">
<image src="../../../static/icon/name.jpg"></image>
</view>

<view class="image-text">
<image src="../../../static/icon/nameone.jpg"></image>
</view>
</scroll-view>
</view>


</view>
<!--    <view class="footer">
      <button class="cancel-btn" @click="showConfirm">取消关注</button>
      <text class="tip">{{tipMsg}}</text>
    </view>
    <confirm title="提示" message="确定取消关注吗？" @confirm="cancelFollow" /> -->
  </view>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: '../../../static/icon/name.jpg',
        nickname: '小意',
        gender: '男',
        location: '巴中市'
      },
      tipMsg: '1111'
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    showConfirm() {
      uni.showModal({
        title: '提示',
        content: '确定取消关注吗？',
        success: (res) => {
          if (res.confirm) {
            this.cancelFollow()
          }
        }
      })
    },
    cancelFollow() {
      // 发送取消关注请求
      // 操作成功后更新tipMsg提示信息
      // this.tipMsg = '取消关注成功'
    }
  }
}
</script>
<style scoped lang="less">
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.header {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 10px;
  background-color: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
.back-btn {
  width: 20px;
  height: 20px;
}
.title {
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
}
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f2f2f2;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.nickname {
  font-size: 16px;
  margin-bottom: 5px;
}
.gender {
  font-size: 14px;
  margin-bottom: 5px;
}
.location {
  font-size: 14px;
  color: #999;
}
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background-color: #fff;
  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
}
.cancel-btn {
  width: 100px;
  height: 32px;
  border: none;
  border-radius: 16px;
  background-color: #f44336;
  color: #fff;
  font-size: 14px;
  /* margin-right: 10px; */
}
.tip {
  font-size: 14px;
  color: #f44336;
}

.container-text{
	
	.text-zj{
	    margin-left: 10px;
	    color: black;
	    font-weight: bold;
	    font-size: 14px;
	}
	.text-zjone{
	    padding: 0 25rpx;
	    font-size: 32rpx;
	   margin-top: 10px;
	    color: black;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 4;
	    overflow: hidden;
	}
	
	.text-title{
	    color:black;
	    margin-left: 10px;
	    margin-top: 20px;
	    font-weight: bold;
	    font-size: 14px;
	}
	
	.container-video{
	    margin-top: 10px;
	    margin-left: -5px;
	    white-space: nowrap;
		
		.video-name{
		    margin-left:1px;
		    width: 100px;
		    height: 120px;
		  display: inline;
		}
		.video-name video{
		    width: 120px;
		    height: 80px;
		    margin-top: 10px;
		    margin-left: 15px;
		}
	}

	.contauner-img{
	    color: black;
	    margin-left: 10px;
	    margin-top: 20px;
	    font-weight: bold;
	    font-size: 14px;
	}
	
	
	
	.container-image{
	    margin-top: 10px;
	    margin-left: -5px;
	    white-space: nowrap;
		
		.image-text{
		    margin-left: 15px;
		    width: 120px;
		    height: 80px;
		    display: inline-block;
		}
		
		.image-text image{
		    width: 120px;
		    height: 80px;
		    border-radius: 14px;
		}
	}
	

	

}


</style>